<template>
  <view class="page_content">
    <form-step :value="0"></form-step>
    <view class="business_title">请先完善油站信息</view>
    <view class="form_item">
      <view class="item_title">
        <text class="iconfont iconxinjiantiezi icon_size"></text>
        油站名称
      </view>
      <view class="item_value">
        <AtInput
          name='bankName'
          placeholder='请输入加油站名称'
          :value="storeName"
          type="text"
          @change="inputStoreName"
        />
      </view>
    </view>
    <view class="form_item">
      <view class="item_title">
        <text class="iconfont iconxinjiantiezi icon_size"></text>
        油站电话
      </view>
      <view class="item_value">
        <AtInput
          name='mobile'
          type="phone"
          placeholder='请输入加油站名称'
          :value="mobile"
          @change="inputMobile"
        />
      </view>
    </view>
    <view class="form_item">
      <view class="item_title">
        <text class="iconfont icontupian icon_size"></text>
        油站照片
      </view>
      <view class="item_value2">
        <AtImagePicker
          :files="storePic"
          :onChange="onChangePic"
          :showAddBtn="storePic.length == 0"
        />
      </view>
    </view>
    <view class="form_item">
      <view class="item_title">
        <text class="iconfont iconxinjiantiezi icon_size"></text>
        油站详细地址
      </view>
      <view class="item_value3">
        <AtTextarea
          :count="false"
          :value="address"
          :onChange="handleChangeAddress"
          :maxLength="200"
          placeholder='请仔细填写，便于客户直接导航到油站'
        />
      </view>
    </view>
    <view class="next_button" @tap="next()">下一步</view>
  </view>
</template>

<script>
import './business.scss';
import Taro from '@tarojs/taro';
import UserAPI from "../../api/user.js"
import FormStep from "../../components/formStep"
import { uploadFile } from "../../utils/uploadFile"
export default {
  components: {
    FormStep
  },
  data() {
    return {
      storeName: "",
      mobile: "",
      storePic: [],
      address: "",
    }
  },
  mounted(){
  },
  methods: {
    inputStoreName(val){
      this.storeName = val;
    },
    inputMobile(val){
      this.mobile = val;
    },
    async onChangePic(files) { // 上传加油站罩棚照片
      if(files.length){
        this.showLoading = true;
        const res = await uploadFile(files[0]);
        if(res.code == 200){
          this.storePic = [{url: res.data.url}]
        }
        this.showLoading = false;
      }else{
        this.storePic = [];
      }
    },
    handleChangeAddress(val){
      this.address = val;
    }
  },
  next(){
    Taro.navigateTo({
      url: "business1"
    })
  }
}
</script>
